<template>
  <div class="pv16 pr16">
    <div class="fs16 fw500">保险方案</div>
    <div class="flex-center-between mt12">
      <a-input-search v-model="schemeName" placeholder="保险方案名称" @change="onInputChange" style="width: 224px" />
      <a-button v-if="hasAdd" :disabled="!currentGroup" type="primary" @click="showModal">添加保险方案</a-button>
    </div>
    <div class="mt12 overflow-y-auto">
      <div v-for="item in planLst" :key="item.id" class="p16 br4 border">
        <div class="flex-center-between">
          <div class="fs16 fw500">{{ item.schemeName }}</div>
          <a-dropdown>
            <a-icon type="ellipsis" class="pointer fw500 fs18" style="color: var(--primary)" />
            <a-menu slot="overlay">
              <a-menu-item v-if="hasUpdate" :disabled="!currentGroup" @click="editPlanItem(item)">编辑</a-menu-item>
              <a-menu-item v-if="hasDelete" @click="delPlanItem(item)">删除</a-menu-item>
            </a-menu>
          </a-dropdown>
        </div>
        <div class="mt8">
          <span class="tc-l3">保险公司：</span>
          <span class="tc-l2">{{ item.insCompanyName }}</span>
        </div>
        <div class="mt12">
          <div>方案明细：</div>
          <div class="overflow-x-auto flex-center mt8">
            <div
              v-for="li in item.itemList"
              :key="li.careerType"
              class="p8 br4 tc-l2 mr12"
              style="background: rgba(244, 244, 244, 1); min-width: 200px"
            >
              <div class="fw500">{{ li.careerType }}</div>
              <div class="mt4"><span class="tc-l3">实际保险月费：</span>{{ li.monthAmount }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <a-modal v-model="modalVisible" :title="modalTitle" destroyOnClose width="600px" @ok="getValues">
      <div class="flex-center mb24">
        <span class="mr4" style="color: var(--red)">*</span>
        <span class="mr4">保险方案：</span>
        <a-input v-model="schemeNameValue" placeholder="请输入" style="width: 224px" />
      </div>
      <div class="flex-center mb24">
        <span class="mr4" style="color: var(--red); visibility: hidden">*</span>
        <span class="mr4">方案详情：</span>
        <a-input v-model="schemeDetail" placeholder="请输入" style="width: 224px" />
      </div>
      <div class="flex-center mb24">
        <span class="mr4" style="color: var(--red)">*</span>
        <span class="mr4">缴费类型：</span>
        <a-radio-group v-model="paymentType">
          <a-radio value="月保">月保</a-radio>
          <a-radio value="年保">年保</a-radio>
        </a-radio-group>
      </div>
      <a-row class="pv8" style="background: rgba(250, 250, 250, 1); border-bottom: 1px solid #e8e8e8">
        <a-col :span="10"><span class="mr4" style="color: var(--red)">*</span>分类</a-col>
        <a-col :span="10" :offset="1"><span class="mr4" style="color: var(--red)">*</span>实际保险月费</a-col>
      </a-row>
      <a-row v-for="(item, idx) in schemeItems" :key="idx" class="pv8" style="border-bottom: 1px solid #e8e8e8">
        <a-col :span="10">
          <a-input :value="item.careerType" placeholder="请输入" @change="onCareerTypeChange($event, idx)" />
        </a-col>
        <a-col :span="10" :offset="1">
          <a-input :value="item.monthAmount" placeholder="请输入" @change="onMonthAmountChange($event, idx)" />
        </a-col>
        <a-col :span="2" :offset="1" class="th30 fs18 pt4 flex-center">
          <a-popconfirm title="内容删除后将无法恢复，确定要删除吗？" @confirm="deleteItem(idx)">
            <a-icon v-if="schemeItems.length > 1" type="delete" class="mr8" style="color: var(--red)"></a-icon>
          </a-popconfirm>
          <a-icon v-if="idx === schemeItems.length - 1" type="plus-circle" style="color: var(--primary)" @click="addItem"></a-icon>
        </a-col>
      </a-row>
      <div class="flex mt24">
        <span class="mr4" style="color: var(--red); visibility: hidden">*</span>
        <span class="mr4">赔付内容：</span>
        <a-textarea v-model="payoutContent" placeholder="请输入" style="width: 224px" />
      </div>
    </a-modal>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  name: "",
  components: {},
  mixins: [],
  props: {
    currentGroup: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      payoutContent: "",
      paymentType: "月保",
      schemeDetail: "",
      schemeId: null,
      schemeName: "",
      schemeNameValue: "",
      modalTitle: "添加保险方案",
      modalVisible: false,
      schemeItems: [
        {
          careerType: "1-3类人员",
          monthAmount: 0
        },
        {
          careerType: "4类人员",
          monthAmount: 0
        },
        {
          careerType: "5类人员",
          monthAmount: 0
        }
      ],
      planLst: [],
      formatError: false
    };
  },
  computed: {
    ...mapGetters(["permissions_shangbao"]),
    hasAdd() {
      return this.permissions_shangbao.includes("insuranceAddService:insuranceAddService.shangbaofangan:addScheme");
    },
    hasUpdate() {
      return this.permissions_shangbao.includes("insuranceAddService:insuranceAddService.shangbaofangan:updateScheme");
    },
    hasDelete() {
      return this.permissions_shangbao.includes("insuranceAddService:insuranceAddService.shangbaofangan:deleteScheme");
    }
  },
  watch: {
    currentGroup(newVal) {
      this.retrieveRecord();
    }
  },
  created() {},
  mounted() {
    this.retrieveRecord();
  },
  methods: {
    delPlanItem(item) {
      this.$confirm({
        title: "删除确认",
        content: "方案删除后无法恢复，确认要删除吗？",
        onOk: () => {
          this.$request({
            url: `/insurance/api/v1/qyCompanySchemes/${item.id}`,
            method: "delete"
          })
            .then((res) => {
              this.$message.success("删除成功");
              this.retrieveRecord();
            })
            .catch((err) => {
              console.log("qyCompanySchemes", err);
            });
        }
      });
    },
    editPlanItem(item) {
      this.schemeId = item.id;
      this.schemeNameValue = item.schemeName;
      this.schemeDetail = item.schemeDetail;
      this.paymentType = item.paymentType;
      this.payoutContent = item.payoutContent;
      this.schemeItems = item.itemList.map((li) => ({
        careerType: li.careerType,
        monthAmount: li.monthAmount
      }));
      this.modalTitle = "编辑保险方案";
      this.modalVisible = true;
    },
    getValues() {
      if (this.formatError) {
        this.$message.warning("格式错误");
        return false;
      }
      if (!this.schemeNameValue) {
        this.$message.warning("有内容未填写");
        return false;
      }
      for (let i = 0; i < this.schemeItems.length; i++) {
        const item = this.schemeItems[i];
        if (!item.careerType || (!item.monthAmount && item.monthAmount !== 0)) {
          this.$message.warning("有内容未填写");
          return false;
        }
      }
      if (this.modalTitle === "添加保险方案") {
        this.$request({
          url: `/insurance/api/v1/qyCompanySchemes`,
          method: "post",
          data: {
            insCompanyId: this.currentGroup,
            schemeName: this.schemeNameValue,
            schemeDetail: this.schemeDetail,
            paymentType: this.paymentType,
            payoutContent: this.payoutContent,
            schemeItemList: this.schemeItems
          }
        })
          .then((res) => {
            this.$message.success("添加成功");
            this.retrieveRecord();
            this.modalVisible = false;
          })
          .catch((err) => {
            console.log("qyCompanySchemes", err);
          });
      } else {
        this.$request({
          url: `/insurance/api/v1/qyCompanySchemes`,
          method: "put",
          data: {
            id: this.schemeId,
            insCompanyId: this.currentGroup,
            schemeName: this.schemeNameValue,
            schemeDetail: this.schemeDetail,
            paymentType: this.paymentType,
            payoutContent: this.payoutContent,
            schemeItemList: this.schemeItems
          }
        })
          .then((res) => {
            this.$message.success("更新成功");
            this.retrieveRecord();
            this.modalVisible = false;
          })
          .catch((err) => {
            console.log("qyCompanySchemes", err);
          });
      }
    },
    deleteItem(idx) {
      const temp = [...this.schemeItems];
      temp.splice(idx, 1);
      this.schemeItems = temp;
    },
    addItem() {
      this.schemeItems = [
        ...this.schemeItems,
        {
          careerType: "",
          monthAmount: ""
        }
      ];
    },
    onMonthAmountChange(e, idx) {
      const val = e.target.value;

      if (/^[0-9]+(.[0-9]+)?$/.test(val)) {
        const temp = [...this.schemeItems];
        temp[idx].monthAmount = val;
        this.schemeItems = temp;
        this.formatError = false;
      } else {
        this.$message.warning("请输入正确格式的数字");
        this.formatError = true;
      }
    },
    onCareerTypeChange(e, idx) {
      const val = e.target.value;
      const temp = [...this.schemeItems];
      temp[idx].careerType = val;
      this.schemeItems = temp;
    },
    onInputChange() {
      this.retrieveRecord();
    },
    showModal() {
      this.schemeNameValue = "";
      this.schemeItems = [
        {
          careerType: "1-3类人员",
          monthAmount: 0
        },
        {
          careerType: "4类人员",
          monthAmount: 0
        },
        {
          careerType: "5类人员",
          monthAmount: 0
        }
      ];
      this.modalTitle = "添加保险方案";
      this.modalVisible = true;
    },
    retrieveRecord() {
      const params = {};
      if (this.schemeName) {
        params["schemeName"] = this.schemeName;
      }
      if (this.currentGroup) {
        params["insCompanyId"] = this.currentGroup;
      }
      this.$request({
        url: `/insurance/api/v1/qyCompanySchemes/selectScheme`,
        params
      })
        .then((res) => {
          this.planLst = res.data;
        })
        .catch((err) => {
          console.log("qyCompanySchemes", err);
        });
    }
  }
};
</script>
<style lang="scss"></style>
